<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="syl-order" style="border-radius: 15px">
          <div slot="header" class="clearfix">
            <span>总销售额</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="capacity" />
          </div>
          <div class="syl-contrast-under" v-html="getNullNames(tran(queryNameValue.totalTurnover))" />
          <el-divider />
          <div class="contrast" v-html="'当日营业额：'+getNullNames(queryNameValue.totalTurnoverDay)" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="syl-meal" style="border-radius: 15px">
          <div slot="header" class="clearfix">
            <span>总套餐销售</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="capacity" />
          </div>
          <div class="syl-contrast-under" v-html="getNullNames(tran(queryNameValue.totalPackageNum))" />
          <el-divider />
          <div class="contrast" v-html="'当日套餐销售：'+getNullNames(queryNameValue.totalPackageNumDay)" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="syl-darter" style="border-radius: 15px">
          <div slot="header" class="clearfix">
            <span>总订单数量</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="capacity" />
          </div>
          <div class="syl-contrast-under" v-html="tran(queryNameValue.totalOrderNum)" />
          <el-divider />
          <div class="contrast" v-html="'当日订单：'+getNullNames(queryNameValue.totalOrderNumDay)" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="syl-green" style="border-radius: 15px">
          <div slot="header" class="clearfix">
            <span>企业数量</span>
            <img src="@/assets/image/antimony.png" alt="" style="float: right; padding: 3px 0">
          </div>
          <div class="text">
            <div class="capacity" />
          </div>
          <div class="syl-contrast-under" v-html="getNullNames(queryNameValue.totalCompanyNum)" />
          <el-divider />
          <div class="contrast" v-html="'门店数量：'+getNullNames(queryNameValue.totalStoreNum)" />
        </el-card>
      </el-col>
    </el-row>
    <div class="month">
      <el-card>
        <div class="syl-sales">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="syl-sales-left">
                销售额
              </div>
            </el-col>
            <el-col :span="8" style="text-align: center">
              <el-button type="text" :class="[type ===1?'':'these']" style="font-size: 16px" @click="getDate(1)">本周</el-button>
              <el-button type="text" :class="[type ===2?'':'these']" style="font-size: 16px" @click="getDate(2)">本月</el-button>
            </el-col>
            <el-col :span="8" style="text-align: right">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                size="mini"
                :clearable="false"
                range-separator="至"
                value-format="timestamp"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="getRangeTime"
              />
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :span="17">
            <h3>销售额趋势</h3>
            <div id="nprdjmakl" class="ordering" />
          </el-col>
          <el-col :span="7">
            <h3>门店销售额排名</h3>
            <div class="syl-saddled">
              <div v-if="orderList.length>0">
                <div v-for="(item,index) in orderList" :key="index+item.storeName" class="syl-saddled-cont">
                  <div class="syl-saddled-left">
                    <div :class="[index<=2?'syl-sales-left-rds':'syl-sales-left-round']" v-html="index+1" />
                  </div>
                  <div class="syl-saddled-ceng" v-html="getNullNames(item.storeName)" />
                  <div class="syl-saddled-right" v-html="tran(item.salesVolume)" />
                </div>
              </div>
              <div v-else>暂无数据</div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { orderSalesRanking, getTotalStatistics, getLineChar } from '@/api/dashboard'

export default {
  name: 'Index',
  data() {
    return {
      type: 1,
      dateRange: [],
      date: [],
      open: false,
      // 非多个禁用
      multiple: true,
      form: {},
      // 门店id
      queryNames: {
        name: '',
        totalOrder: '',
        setMeal: '',
        order: '',
        storeId: null
      },
      queryName: {
        capacity: 0,
        orderNum: 0,
        packageTotalMoney: 0,
        packageTotalNum: 0
      },
      rules: {},
      // 门店列表
      orderList: [],
      // 门店数据
      queryNameValue: {}
    }
  },
  created() {
    this.getDate(1)
    this.getNameValue()
  },
  mounted() {
    this.getOrderValue()
  },
  methods: {
    /** 本周,本月,半月 **/
    getDate(row) {
      const end = new Date()
      const start = new Date()
      var barWidth = null
      if (row === 1) {
        this.type = 1
        barWidth = 30
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        this.dateRange = [start, end]
      } else if (row === 2) {
        this.type = 2
        barWidth = 15
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        this.dateRange = [start, end]
      }
      this.getOrderLineChar(barWidth, name)
    },
    /** 总店体数据统计 **/
    getNameValue() {
      const date = new Date()
      const data = {
        nowDate: this.parseTime(date, '{y}-{m}-{d}')
      }
      getTotalStatistics(data).then(res => {
        this.queryNameValue = res.data
      })
    },
    /** 首页销售额 **/
    getOrderLineChar(barWidth) {
      getLineChar(this.addDateOrders(this.queryNames, this.dateRange)).then(res => {
        const { data } = res
        const x = data.map((item) => item.dayDate)
        const y = data.map((item) => item.totalTurnoverDay)
        this.getOrdering(x, y, barWidth)
      })
    },
    /** 获取门店总体统计 **/
    getOrderList() {
    },
    /** 门店销售额排名 **/
    getOrderValue() {
      orderSalesRanking().then(res => {
        this.orderList = res.data
      })
    },
    /** 营业日  **/
    getOrdering(x, y, barWidth) {
      var myChar
      if (myChar !== undefined && myChar !== '' && myChar !== null) {
        myChar.dispose()
      }
      // 基于准备好的dom，初始化echarts实例
      myChar = this.$echarts.init(document.getElementById('nprdjmakl'))
      // 绘制图表
      myChar.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          width: '89%', // 宽度
          height: '76%', // 高度
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: x
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '销售额',
            data: y,
            type: 'bar',
            barWidth: barWidth, // 柱图宽度
            areaStyle: {},
            // 颜色
            itemStyle: {
              normal: {
                color: '#369CFB'
              }
            }
          }
        ]
      })
      setTimeout(() => {
        window.addEventListener('resize', function() {
          myChar.resize()
        })
      }, 200)
    },
    /** 自定义时间 **/
    getRangeTime() {
      const type = this.type
      const barWidth = type ? 30 : 20
      this.getOrderLineChar(barWidth)
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0;
}

.syl-order {
  width: 100%;
  height: 220px;
  background-image: url("./../../../assets/image/sales.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .contrast {
    width: 100%;
    height: 30px;
    color: #FFFFFF;
    line-height: 35px;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
  }

  .capacity {
    width: 44px;
    height: 57px;
    margin: -15px auto;
    background-image: url("./../../../assets/image/amount.png");
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
    text-align: center;
  }

  .syl-contrast-under {
    width: 100%;
    height: 38px;
    text-align: center;
    margin: 15px 0;
    font-size: 22px;
    line-height: 38px;
    font-weight: 500;
    color: #FFFFFF;
  }
}

.syl-meal {
  width: 100%;
  height: 220px;
  background-image: url("./../../../assets/image/views.png");
  background-repeat: no-repeat;
  background-size: cover;

  .contrast {
    width: 100%;
    height: 30px;
    color: #FFFFFF;
    line-height: 35px;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
  }

  .syl-contrast-under {
    width: 100%;
    height: 38px;
    text-align: center;
    margin: 15px 0;
    font-size: 22px;
    line-height: 38px;
    font-weight: 500;
    color: #FFFFFF;
  }

  .capacity {
    width: 56px;
    height: 56px;
    margin: -15px auto;
    background-image: url("./../../../assets/image/smiley.png");
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
    text-align: center;
    font-size: 22px;
    line-height: 170px;
    font-weight: 500;
    color: #FFFFFF;
  }
}

.syl-darter {
  width: 100%;
  height: 220px;
  background-image: url("./../../../assets/image/darter.png");
  background-repeat: no-repeat;
  background-size: cover;

  .contrast {
    width: 100%;
    height: 30px;
    color: #FFFFFF;
    line-height: 35px;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
  }

  .syl-contrast-under {
    width: 100%;
    height: 38px;
    text-align: center;
    margin: 15px 0;
    font-size: 22px;
    line-height: 38px;
    font-weight: 500;
    color: #FFFFFF;
  }

  .capacity {
    width: 50px;
    height: 56px;
    margin: -15px auto;
    background-image: url("./../../../assets/image/package.png");
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
    text-align: center;
    font-size: 22px;
    line-height: 170px;
    font-weight: 500;
    color: #FFFFFF;
  }
}

.syl-green {
  width: 100%;
  height: 220px;
  background-image: url("./../../../assets/image/green.png");
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;

  .contrast {
    width: 100%;
    height: 30px;
    color: #FFFFFF;
    line-height: 35px;
    text-align: right;
    font-size: 14px;
    font-weight: 400;
  }

  .syl-contrast-under {
    width: 100%;
    height: 38px;
    text-align: center;
    margin: 15px 0;
    font-size: 22px;
    line-height: 38px;
    font-weight: 500;
    color: #FFFFFF;
  }

  .capacity {
    width: 60px;
    height: 56px;
    margin: -15px auto;
    background-image: url("./../../../assets/image/backup.png");
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: cover;
    text-align: center;
    font-size: 22px;
    line-height: 170px;
    font-weight: 500;
    color: #FFFFFF;
  }
}

.box-card {
  width: 100%;

  .text {
    font-size: 14px;

    .order {
      width: 100%;
      height: 40px;
      text-align: left;
      line-height: 40px;
      font-size: 22px;
      font-weight: 600;
    }

    .contrast {
      width: 100%;
      height: 120px;
      line-height: 190px;
      display: flex;
      font-size: 14px;

      .left {
        width: 50%;
        height: 50px;
        text-align: center;
      }

      .right {
        width: 50%;
        height: 50px;
        text-align: center;
      }

      img {
        width: 16px;
      }
    }
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
}

.month {
  margin-top: 20px;
  width: 100%;

  .syl-sales {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #cccccc;

    .syl-sales-left {
      width: 40%;
      height: 50px;
      color: #3AA0FF;
      font-size: 16px;
      font-weight: 600;
      float: left;
      line-height: 50px;
      text-align: left;
    }

    .syl-sales-right {
      text-align: right;
      width: 60%;
      height: 50px;
      line-height: 50px;
      float: right;
    }
  }

  .active {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }

  .ordering {
    width: 100%;
    margin: 20px 0;
    height: 360px;
  }
}

.export {
  width: 100%;
  height: 60px;
  line-height: 60px;

  h3 {
    margin: 0;
    padding: 0;
  }
}

.syl-contrast {
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
}

.syl-saddled {
  width: 88%;
  height: 340px;

  .syl-saddled-cont {
    width: 100%;
    height: 48px;
    line-height: 48px;
    display: flex;

    .syl-saddled-left {
      width: 13%;
      text-align: center;
      margin: auto;

      .syl-sales-left-round {
        width: 30px;
        height: 30px;
        line-height: 30px;
        border-radius: 50%;
        background-color: #cccccc;
      }

      .syl-sales-left-rds {
        width: 30px;
        height: 30px;
        line-height: 30px;
        color: white;
        border-radius: 50%;
        background: #3AA0FF;
      }
    }

    .syl-saddled-ceng {
      width: 60%;
      height: 100%;
      color: #333333;
      font-size: 16px;
      font-weight: 500;
    }

    .syl-saddled-right {
      width: 30%;
      height: 100%;
      color: #333333;
      text-align: right;
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.these {
  color: #000000;
  font-weight: 400;
  font-size: 16px;
}

/deep/ .el-divider--horizontal {
  margin: 0;
  height: 1px;
  background-color: #FFFFFF;
}
</style>
